<template>
  <!-- 电台专用 -->
  <ul class="searchBox">
    <router-link
      :to="{ name: 'radiostationdetail', query: { id: item.id } }"
      tag="li"
      v-for="item in content"
      :key="item.id"
    >
      <img :src="item.picUrl" class="picImg" alt="" />
      <p class="itemName txtHide">{{ item.name }}</p>
      <p class="itemNickname txtHide">by {{ item.dj.nickname }}</p>
    </router-link>
  </ul>
</template>

<script>
export default {
  props: {
    content: {
      type: Array,
      default: () => [],
    },
  },
};
</script>

<style lang="scss" scoped>
.searchBox {
  margin: 16px 0 0 -37px;
  li {
    display: inline-block;
    width: 150px;
    margin: 0 0 40px 37px;
    .itemName {
      color: #333;
      margin: 13px 0 6px;
      line-height: 16px;
      font-size: 14px;
      font-weight: normal;
    }
    .itemNickname {
      color: #999;
      line-height: 18px;
    }
    .picImg {
      width: 150px;
      height: 150px;
    }
  }
}
</style>